import React from 'react';
import BaseScreen from "../screen/BaseScreen";
import Cell from "./Cell";
import PropTypes from 'prop-types'
import PressTouch from "./PressTouch";
import CityPicker from 'react-city-picker'
import data from '../../node_modules/china-area-data/data'
import '../css/anthenView.css'

class AuthenticationView extends BaseScreen {
    static propTypes = {
        accountShow: PropTypes.bool,
        passwordShow: PropTypes.bool,
        nameShow: PropTypes.bool,
        emailShow: PropTypes.bool,
        cityShow: PropTypes.bool,
        images: PropTypes.string,
        yzmShow: PropTypes.bool,
        style: PropTypes.object,
        ps: PropTypes.string,
        valueFunc: PropTypes.func,
        submit: PropTypes.func,
        handleChange: PropTypes.func,
        helpfunc: PropTypes.func
    };

    componentDidMount() {
    }

    constructor(props) {
        super(props);
        this.state = {
            ...this.getDefaultState(),
            phone: '',
            password: '',
            province: '650000',
            city: '650400',
            district: '650421',
        };
    }

    isVerify() {
        return false
    }

    city() {
        return <div style={{
            height: '35px',
            marginBottom: '1px',
            backgroundColor: 'white',
            fontSize: '1rem',
            width: '100%'
        }}>
            <span style={{
                width: '80px',
                paddingLeft: '15px',
                lineHeight: '35px',
                textAlign: 'center',
                display: 'inline-block',
                color: '#383838'
            }}>城市</span>
            <CityPicker source={data} noDistrict
                        onOptionChange={(event) => {
                            this.props.handleChange(event)
                        }}
                        style={{display: 'inline-block'}}/>
        </div>
    }

    render() {
        return (
            <div style={{...this.props.style}}>
                <div className="icon" style={{width: '100%', textAlign: 'center'}}>
                    <img src={this.props.images} alt=""
                         style={{margin: '2.428rem auto', width: '70.5px', height: '70.5px'}}/>
                </div>
                <div className="info" style={{padding: '0 10px'}}>
                    {this.props.accountShow ? <Cell title={'账号'} isInput={true} placeholder={'请输入账号'}
                                                    valueFunc={(event) => {
                                                        this.props.valueFunc('account', event)
                                                    }}/> : null}
                    {this.props.nameShow ? <Cell title={'姓名'} isInput={true} placeholder={'请输入姓名'}
                                                 valueFunc={(event) => {
                                                     this.props.valueFunc('name', event)
                                                 }}/> : null}
                    {this.props.emailShow ? <Cell title={'邮箱'} isInput={true} placeholder={'请输入邮箱'}
                                                  valueFunc={(event) => {
                                                      this.props.valueFunc('email', event)
                                                  }}/> : null}
                    {this.props.passwordShow ? <Cell title={'密码'} isInput={true} type="password" placeholder={'请输入密码'}
                                                     valueFunc={(event) => {
                                                         this.props.valueFunc('password', event)
                                                     }}/> : null}
                    {this.props.yzmShow ? <Cell title={'验证码'} isInput={true} placeholder={'请输入验证码'}
                                                valueFunc={(event) => {
                                                    this.props.valueFunc('yzm', event)
                                                }}/> : null}
                    {this.props.cityShow ? this.city() : null}
                </div>

                <div className="ps" style={{
                    paddingLeft: '20px',
                    color: "#f55e44",
                    fontSize: '12px',
                    marginTop: '12px'
                }}>{this.props.ps ? '注：' + this.props.ps : null}</div>
                <div className="help" style={{textAlign: 'center', marginTop: '74.5px', color: '#c5c5c5'}}>认证遇到问题？
                    <span style={{color: '#70b7ff'}} onClick={this.props.helpfunc}>点这里</span></div>
                <PressTouch
                    bgColor='#60b1f7'
                    activeColor='#dbdbdb'
                    style={{borderRadius: 10, padding: 8, margin: '1rem 50px'}}
                    onClick={this.props.submit}>
                    <p style={{textAlign: 'center', color: '#fff', fontSize: '20px'}}>授权</p>
                </PressTouch>
            </div>
        );
    }
}

export default AuthenticationView;